<template>
  <div id="carousel">
    <Carousel
      v-model="value"
      :autoplay="setting.autoplay"
      :autoplay-speed="setting.autoplaySpeed"
      :dots="setting.dots"
      :radius-dot="setting.radiusDot"
      :trigger="setting.trigger"
      :arrow="setting.arrow"
    >
      <CarouselItem v-for="(carouselItem,index) in carouselItems" :key="index">
        <router-link :to="carouselItem.link">
          <img :src="carouselItem.imgurl" width="100%" height="200px" />
        </router-link>
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>
import Vue from "vue";
//引入组件
import { Carousel, CarouselItem } from "view-design";
//使用组件
Vue.use(Carousel).use(CarouselItem);
//导入view-design样式
import "view-design/dist/styles/iview.css";

export default {
  name: "carousel",
  components: {
    Carousel,
    CarouselItem
  },
  props: ["carouselItems"],
  data() {
    return {
      value: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 5000,
        dots: "inside",
        radiusDot: false,
        trigger: "hover",
        arrow: "hover"
      }
    };
  },

  computed: {},

  watch: {},

  methods: {},

  created() {},

  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>